<template>
  <div id="app" class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="ibox float-e-margins">
        <div class="ibox-content col-md-12">
          <form id="patrolTaskForm" method="post" class="form m-t" @submit.prevent="save()" accept-charset="UTF-8">
            <input type="hidden" name="id" v-model="item.id"/>
            <input type="hidden" name="token" v-model="item.token"/>
            <input type="hidden" name="newFlag" v-model="newFlag"/>
            <div class="clearfix "></div>
            <div class="col-md-6">

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">发布对象：</label>
                <div class="col-md-12">
                  <!--<input id="bean-target" name="target" v-model="item.target" class="form-control" type="text"  placeholder="请输入发布对象（一期系统只有本级河道可选）"  required="" aria-required="true"  aria-describedby="bean-target-error"  maxlength="50"   aria-invalid="true">-->
                  <select data-placeholder="选择等级" class="input-sm" maxlength="50" aria-invalid="true" id="bean-target" name="target" @change="getRivers">
                    <option value="本级河道">本级河道</option>
                    <option value="下级河道">下级河道</option>
                  </select>
                  <!--<input type="hidden" name="target" value="本级河道"/>-->
                  <span id="bean-target-error" class="help-block m-b-none" for="bean-target"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">所在河道：</label>
                <div class="col-md-12">
                  <!--<input id="bean-riverCourseCode" name="riverCourseCode" v-model="item.riverCourseCode" class="form-control" type="text"  placeholder="请输入所在河道"  required="" aria-required="true"  aria-describedby="bean-riverCourseCode-error"  maxlength="50"   aria-invalid="true">-->
                  <!--<riverSelect :selected-code="item.riverCourseCode" @getLevel="getLevel"/>-->
                  <select data-placeholder="选择所在河道" id="bean-riverCourseCode" name="riverCourseCode" class="form-control"
                      aria-describedby="bean-riverCourseCode-error" maxlength="50" aria-invalid="true" @change="getLevel" required>
                    <option value="">--请选择所在河道--</option>
                    <option :level="river.level" :value="river.id" :selected="item.riverCourseCode === river.id" v-for="river in rivers">{{ river.name }}</option>
                  </select>
                  <span id="bean-riverCourseCode-error" class="help-block m-b-none" for="bean-riverCourseCode"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">任务类型：</label>
                <div class="col-md-12">
                  <!--<input id="bean-taskType" name="taskType" v-model="item.taskType" class="form-control" type="text"  placeholder="请输入任务类型（临时任务、常规任务、紧急任务）"  required="" aria-required="true"  aria-describedby="bean-taskType-error"  maxlength="20"   aria-invalid="true">-->
                  <select data-placeholder="选择任务类型" id="bean-taskType" name="taskType"
                      class="form-control" aria-describedby="bean-taskType-error" maxlength="50"
                      aria-invalid="true">
                    <option value="临时任务" :selected="'临时任务' === item.taskType">临时任务</option>
                    <option value="常规任务" :selected="'常规任务' === item.taskType">常规任务</option>
                    <option value="紧急任务" :selected="'紧急任务' === item.taskType">紧急任务</option>
                  </select>
                  <span id="bean-taskType-error" class="help-block m-b-none" for="bean-taskType"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">执行人角色（巡查员、河长）：</label>
                <div class="col-md-12">
                  <!--<input id="bean-executorRole" name="executorRole" v-model="item.executorRole" class="form-control" type="text"  placeholder="请输入执行人角色（巡查员、河长）"  required="" aria-required="true"  aria-describedby="bean-executorRole-error"  maxlength="20"   aria-invalid="true">-->
                  <select data-placeholder="选择任务类型" id="bean-executorRole" name="executorRole"
                      class="form-control" aria-describedby="bean-executorRole-error" maxlength="50"
                      aria-invalid="true">
                    <option value="巡查员" :selected="'巡查员' === item.executorRole">巡查员</option>
                    <option value="河长" :selected="'河长' === item.executorRole">河长</option>
                  </select>
                  <span id="bean-executorRole-error" class="help-block m-b-none" for="bean-executorRole"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">任务开始时间：</label>
                <div class="col-md-12">
                  <input autocomplete="off" id="bean-startTime" name="startTime" v-model="item.startTime"
                      class="laydate-icon form-control layer-date" type="text" placeholder="请输入任务开始时间" required=""
                      aria-required="true" aria-describedby="bean-startTime-error" aria-invalid="true">
                  <span id="bean-startTime-error" class="help-block m-b-none" for="bean-startTime"></span>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">任务有效结束时间：</label>
                <div class="col-md-12">
                  <input autocomplete="off" id="bean-endTime" name="endTime" v-model="item.endTime"
                      class="laydate-icon form-control layer-date" type="text" placeholder="请输入任务有效结束时间" required=""
                      aria-required="true" aria-describedby="bean-endTime-error" aria-invalid="true">
                  <span id="bean-endTime-error" class="help-block m-b-none" for="bean-endTime"></span>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">实际执行开始时间：</label>
                <div class="col-md-12">
                  <input autocomplete="off" id="bean-excStartTime" name="excStartTime" v-model="item.excStartTime"
                      class="laydate-icon form-control layer-date" type="text" placeholder="请输入实际执行开始时间" required=""
                      aria-required="true" aria-describedby="bean-excStartTime-error" aria-invalid="true">
                  <span id="bean-excStartTime-error" class="help-block m-b-none" for="bean-excStartTime"></span>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">实际执行结束时间：</label>
                <div class="col-md-12">
                  <input autocomplete="off" id="bean-excEndTime" name="excEndTime" v-model="item.excEndTime"
                      class="laydate-icon form-control layer-date" type="text" placeholder="请输入实际执行结束时间" required=""
                      aria-required="true" aria-describedby="bean-excEndTime-error" aria-invalid="true">
                  <span id="bean-excEndTime-error" class="help-block m-b-none" for="bean-excEndTime"></span>
                </div>
              </div>
            </div>
            <div class="col-md-6">

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">任务状态：</label>
                <div class="col-md-12">
                  <input id="bean-taskStatus" name="taskStatus" v-model="item.taskStatus"
                      class="form-control" type="text" placeholder="未巡查" required=""
                      aria-required="true" aria-describedby="bean-taskStatus-error" maxlength="10"
                      aria-invalid="true" readonly>
                  <span id="bean-taskStatus-error" class="help-block m-b-none" for="bean-taskStatus"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">任务内容：</label>
                <div class="col-md-12">
                  <input id="bean-taskContent" name="taskContent" v-model="item.taskContent" class="form-control"
                      type="text" placeholder="请输入任务内容" required="" aria-required="true"
                      aria-describedby="bean-taskContent-error" maxlength="100" aria-invalid="true">
                  <span id="bean-taskContent-error" class="help-block m-b-none" for="bean-taskContent"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">河长级别：</label>
                <div class="col-md-12">
                  <input id="bean-creatorLevel" name="creatorLevel" v-model="item.creatorLevel" class="form-control"
                      type="text" placeholder="请输入创建者河长级别" aria-describedby="bean-creatorLevel-error"
                      maxlength="20" aria-invalid="true" readonly>
                  <span id="bean-creatorLevel-error" class="help-block m-b-none" for="bean-creatorLevel"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">备注：</label>
                <div class="col-md-12">
                  <input id="bean-memo" name="memo" v-model="item.memo" class="form-control" type="text"
                      placeholder="请输入备注" aria-describedby="bean-memo-error" maxlength="255" aria-invalid="true">
                  <span id="bean-memo-error" class="help-block m-b-none" for="bean-memo"></span>
                </div>
              </div>

            </div>

            <div class="clearfix "></div>
            <!--<div class="col-md-12">-->

            <!--<div class="form-group clearfix">-->
            <!--<label class="col-md-8 control-label">巡查轨迹（轨迹坐标点集合）([{lon,lat},{lon,lat}...])：</label>-->
            <!--<div class="col-md-12">-->
            <!--<textarea aria-describedby="bean-patrolTrack-error" aria-invalid="true" id="bean-patrolTrack"-->
            <!--name="patrolTrack" placeholder="请输入内容" style="height: 200px;width: 100%;"-->
            <!--v-model="item.patrolTrack"></textarea>>-->
            <!--<span id="bean-patrolTrack-error" class="help-block m-b-none" for="bean-patrolTrack"></span>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->

            <div class="clearfix "></div>
            <div class="col-12 text-center" style="height: 50px;">
              <div>
                <input class="btn btn-primary" type="submit" value="保存"/> | <a @click="lbox.closeMyBoxLayer()" class="btn btn-danger" href="javascript:">返回</a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import '@/assets/css/style.css'

import $ from '@/assets/js/jquery-vendor.js'
import 'jquery.cookie'
import axios from 'axios'
import '@/assets/js/validate/validation-vendor.js'

// import VueUeditorWrap from 'vue-ueditor-wrap'
import 'layui-laydate/dist/theme/default/laydate.css'
import laydate from 'layui-laydate'
import {$storage, apiUtil, axiosContentType, site} from '@/assets/js/boss'
import riverSelect from '../river/riverSelect'

export default {
  data() {
    return {
      item: {},
      newFlag: 0,
      uuidToken: '',
      rivers: []
    }
  },
  components: {
    riverSelect
  },
  mounted() {
    let that = window.$vueApp = this;
    that.getRivers();
    that.item.taskStatus = '未巡查'
    document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
    $('#patrolTaskForm').validate();
    that.staff.init(function () {
      that.newFlag = sessionStorage.getItem(site.patrolTask.info);
      if (that.newFlag) that.uuidToken = apiUtil.guid();
      if (apiUtil.existSessionKey(site.patrolTask.info)) {
        that.info();
      }
    });
    laydate.render({
      elem: '#bean-startTime',
      event: 'click',
      type: 'datetime',
      format: 'yyyy-MM-dd HH:mm:ss',
      done: function (val) {
        that.item.startTime = val;
      }
    });

    laydate.render({
      elem: '#bean-excStartTime',
      event: 'click',
      type: 'datetime',
      format: 'yyyy-MM-dd HH:mm:ss',
      done: function (val) {
        that.item.excStartTime = val;
      }
    });
    laydate.render({
      elem: '#bean-endTime',
      event: 'click',
      type: 'datetime',
      format: 'yyyy-MM-dd HH:mm:ss',
      done: function (val) {
        that.item.endTime = val;
      }
    });
    laydate.render({
      elem: '#bean-excEndTime',
      event: 'click',
      type: 'datetime',
      format: 'yyyy-MM-dd HH:mm:ss',
      done: function (val) {
        that.item.excEndTime = val;
      }
    });
  },
  methods: {
    info() {
      let that = window.$vueApp = this;
      axios.get(site.patrolTask.info + sessionStorage.getItem(site.patrolTask.info), {}).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          that.item = result.data;
        } else {
          alert(result.message);
        }
      });
    },
    save() {
      let that = window.$vueApp = this;
      if ($('#patrolTaskForm').valid()) {
        axios.post(site.patrolTask.save, $('#patrolTaskForm').serialize(),
            axiosContentType.xWwwFormUrlencoded).then(function (response) {
          const result = response.data;
          // console.info("获取数据.." + JSON.stringify(result));
          if (result.code === 0) {
            parent.$vueApp.page();
            alert('保存成功!');
            that.lbox.closeMyBoxLayer()
          } else {
            alert(result.message);
          }
        });
      }
    },
    getLevel() {
      let that = window.$vueApp = this;
      let level = $('#bean-riverCourseCode option:selected').attr('level');
      console.log(level)
      if (level) {
        that.item.creatorLevel = level
        $('#bean-creatorLevel').val(level)
      } else {
        alert(`河道等级：${level}`)
        $('#bean-creatorLevel').val('')
      }
    },
    getRivers() {
      let that = window.$vueApp = this;
      let areaIds = JSON.parse($storage.getItem('staff')).areaId ? JSON.parse($storage.getItem('staff')).areaId : '';
      let target = $('#bean-target option:selected').attr('value');
      console.log(target)
      let level = '';
      let num = areaIds.split(',').length
      // 市级 县级 乡镇级 村级
      if (num === 2) {
        level = '市级'
      } else if (num === 3) {
        level = '县级'
      } else if (num === 4) {
        level = '乡镇级'
      } else if (num === 5) {
        level = '村级'
      }
      if (target === '下级河道') {
        if (level === '市级') {
          level = '县级'
        } else if (level === '县级') {
          level = '乡镇级'
        } else if (level === '乡镇级') {
          level = '村级'
        } else if (level === '村级') {
          // 村级无下级行政区划，下级河道应该是空的
          level = '无'
        }
      }
      // console.log(level)
      axios.get(`${site.riverInfo.list}?areaIds=${areaIds}&level=${level}`).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          that.rivers = result.data;
        } else {
          alert(result.message);
        }
      });
    }
  }
}
</script>

